<template>
  <div class="article-detail-container">
    <el-card shadow="hover" class="article-card">
      <h1 class="article-title">{{ article.title }}</h1>
      <div class="article-content" v-html="article.content"></div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
import { getArticleById, getPublicArticleById } from '@/api/piece';

const route = useRoute();
const article = ref({ title: '', content: '' });

onMounted(async() => {
  console.log('route.params', route);
  const id = route.params.id;
  const type = route.params.type;
  if (!id) {
    ElMessage.error('文章ID不存在');
    return;
  }
  if (type === 'public') {
    // 查看公共文章详情
    try {
      const res = await getPublicArticleById(id as string);
      article.value = res.data || { title: '', content: '' };
    } catch (e) {
      ElMessage.error('获取文章详情失败');
      console.error(e);
    }
    return;
  } else {
    try {
      const res = await getArticleById(id as string);
      article.value = res.data || { title: '', content: '' };
    } catch (e) {
      ElMessage.error('获取文章详情失败');
      console.error(e);
    }
  }
});
</script>

<style scoped>
.article-detail-container {
  max-width: 800px;
  margin: 32px auto;
  padding: 0 16px;
}
.article-card {
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  padding: 32px 24px;
}
.article-title {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 24px;
  text-align: center;
  word-break: break-all;
}
.article-content {
  font-size: 1.1rem;
  line-height: 2;
  color: #333;
  word-break: break-word;
}
@media (max-width: 600px) {
  .article-detail-container {
    max-width: 100%;
    padding: 0 4px;
  }
  .article-card {
    padding: 16px 6px;
  }
  .article-title {
    font-size: 1.3rem;
    margin-bottom: 16px;
  }
  .article-content {
    font-size: 1rem;
  }
}
</style>
